<template>
	<div class="waitpaymentinformation">
	<orderinformation :orderinformation="productlist"></orderinformation>
	<body class="body">
		<div class="product">
			<div class="productlist">
			<div class="productInfomation" @click="goProduct(productlist.productId)">
				<div class="left">
					<img :src="productlist.thumbnail" />
				</div>
				<div class="right">
					<p class="productName">{{productlist.productName}}</p>
					<p><span>租赁押金：</span><span style="color: #FF0000;">￥</span><span style="color: #FF0000;">{{productlist.deposit}}元</span></p>
					<!--<p v-if="!!productlist.favourableAmount"><span>预付租金：</span><span style="color: #FF0000;">￥</span><span style="color: #FF0000;">{{productlist.favourableAmount}}元</span></p>-->
					<p><span>租赁价格：</span><span style="color: #FF0000;">￥</span><span style="color: #FF0000;">{{productlist.rentPrice}}</span><span style="color: #FF0000;">元/每天</span></p>
					<p class="shortDesc">{{productlist.shortDesc}}</p>
				</div>
			</div>
			<div class="payWay" :style="{display: dis}">
				<label class="demo--label">
                 <input class="demo--radio" type="radio" id="one" value="1" v-model="pay">
                 <span class="demo--radioInput"></span>微信支付
              </label>
              <label class="demo--label">
                 <input class="demo--radio" type="radio" id="one" value="2" v-model="pay">
                 <span class="demo--radioInput"></span>账户余额
              </label>
            </div>
			<div class="rodertotalprice">
				<p class="ordertitle">订单总价</p>
				<p class="deposit" v-if="!!productlist.totalPay">￥{{productlist.totalPay}}元</p>
				<p class="deposit" v-else>￥{{productlist.deposit}}元</p>
			</div>
			<div class="rellayprice">
				<p class="rellaytitle">{{styletitle}}</p>
				<p class="rellaypayment" v-if="!!productlist.totalPay">￥{{productlist.totalPay}}元</p>
				<p class="rellaypayment" v-else>￥{{productlist.deposit}}元</p>
			 </div>
		  </div>
		</div>
		<div class="preferentialactives" v-if="productlist.productFavourables !== undefined && productlist.productFavourables.length >0">
			<p class="titleactive">此订单享有的优惠活动</p>
			<div class="actives" v-for="(item,index) in productlist.productFavourables">
			  <h3>{{item.favourType}}</h3>
			  <p class="details">{{item.favourDesc}}</p>
			</div>
		</div>
		<div class="orderinformation">
			<p class="orderheader">订单信息</p>
			<div class="rodercontent">
			<p><span>订单编号：</span><span>{{productlist.rentSerial}}</span></p>
			<p><span>店铺名：</span><span>{{productlist.shopName}}</span></p>
			<p v-if="!!productlist.favourableAmount"><span>预付租金：</span><span>￥{{productlist.favourableAmount}}元</span></p>
			<p><span>创建时间：</span><span>{{productlist.createTime}}</span></p>
			</div>
		</div>   
	</body>
	<footer class="footers">
		<div class="payfor" @click="payorder(productlist.rentSerial)">{{stylename}}</div>
		<div class="cancleorder" @click="cancleorder(productlist.rentSerial)">取消订单</div>
	</footer>
</div>
</template>

<script>
import orderinformation from '@/components/m-orderinformation/orderinformation'
import { jsSDK } from '@/common/js/pay'

export default {
	name: 'waitpaymentinformation',
	components: {
		orderinformation
	},
	data() {
		return {
			productlist: {},
			stylename: '',
			styletitle: '',
			payWay: '付款',
			pay: '',
			dis: ''
		}
	},
	mounted() {
		this.getNoPayInformation();
	},
	methods: {
		//获取付款详情
		getNoPayInformation() {
			this.stylename = this.$route.query.style_name;
			this.styletitle = this.$route.query.style_title;
			if(this.stylename == '付款') {
				this.dis = "block"
			} else {
				this.dis = "none"
			}
			this.$http.get(this.$store.state.reqUrl + this.$route.query.interface_url + '/' + this.$route.query.payNo_rentSerial, {}).then(res => {
					this.productlist = res.data;
			})
		},
		//付款或者查看取货码
		payorder(rentSerial) {
			if(this.stylename == "付款") {
				this.$http.get(this.$store.state.reqUrl + '/customer/orders/payDeposit/' + this.$route.query.payNo_rentSerial + '?payWay=' + this.pay, {}).then(res => {
					if(res.data.payWay == 1) {
						jsSDK(res.data, this.payWay)
					} else {
						this.$toast(res.data.msg)
						this.$router.push({
							path: "/waitpickgood",
							query: {
								interface_url: '/customer/orders',
								statu:1,
								style_name: '取货码',
								order_title: '待取货',
								style_title:'实付款'
							}
						});
					}
				}).catch(res => {
					this.$toast(res.response.data)
				})
			} else {
				this.$router.push({
					path: '/dimensionalcode',
					query: {
						rentSerial: rentSerial
					}
				})
			}
		},
		//取消订单
		cancleorder(rentSerial) {
			this.$messagebox.confirm('您确定要取消此订单吗?').then(action => {
				this.$http.get(this.$store.state.reqUrl + '/customer/orders/cancleOrder/' + rentSerial, {}).then(res => {
					this.$toast({
						message: res.data.msg,
						duration: 2500
					})
					this.$router.back(-1)
				}).catch(res => {
					this.$toast(res.response.data)
				})
			});
		},
		//到产品详情页
		goProduct(productId) {
			this.$router.push({
				path: '/productInfomation',
				query: {
					product_id: productId
				}
			});
		}
	}
}
</script>

<style lang="less" scoped>
    .waitpaymentinformation {
    	margin-top: 100px;
    	font-size: 28px;
    	margin-bottom: 100px;
    	width: 100%;
    	.body {
    		background: none;
    		.product {
    			width: 100%;
    			margin-bottom: 20px;
    			background: #FFFFFF;
    			.productlist {
    				padding: 20px 20px;
    				.payWay {
    					margin:20px 0 20px 0;
    					font-size: 28px;
    					.demo--label {
    						margin: 20px 20px 0 0;
    						display: inline-block
    					}
    					.demo--radio {
    						display: none
    					}
    					.demo--radioInput {
    						background-color: #fff;
    						border: 2px solid rgba(0, 0, 0, 0.15);
    						border-radius: 100%;
    						display: inline-block;
    						height: 36px;
    						margin-right: 10px;
    						margin-top: -1px;
    						vertical-align: middle;
    						width: 36px;
    						line-height: 1
    					}
    					.demo--radio:checked+.demo--radioInput:after {
    						background-color: #00A1E9;
    						border-radius: 100%;
    						content: "";
    						display: inline-block;
    						height: 26px;
    						margin-left: 5px;
    						margin-top: 5px;
    						width: 26px
    					}
    					.demo--checkbox.demo--radioInput,
    					.demo--radio:checked+.demo--checkbox.demo--radioInput:after {
    						border-radius: 0;
    					}
    				}
    				.productInfomation {
    					display: flex;
    					.left {
    						width: 120px;
    						height:  120px;
    						img {
    							width: 100%;
    							height: 100%;
    						}
    					}
    					.right {
    						font-size: 26px;
    						flex: 1;
    						margin-left: 20px;
    						.productName{
    							color: #000000;
    							font-weight: 800;
    						}
    						.shortDesc {
    							line-height: 30px;
    						}
    					}
    				}
    			}
    			.rodertotalprice {
    				display: flex;
    				height: 40px;
    				font-size: 26px;
    				padding: 20px 0;
    				color: #000000;
    				.ordertitle {
    					flex: 1;
    				}
    				.deposit {
    					text-align: right;
    					flex: 1;
    				}
    			}
    			.rellayprice {
    				font-size: 26px;
    				color: #000000;
    				display: flex;
    				.rellaytitle {
    					flex: 1;
    				}
    				.rellaypayment {
    					color: #FF0000;
    					text-align: right;
    					flex: 1;
    				}
    			}
    		}
    		.preferentialactives{
		     	width:100%;
		     	background: #FFFFFF;
		     	margin:20px 0 20px 0;
		     	.titleactive{
		     		padding: 20px 20px 30px 20px;
    				color: #000000;
    				font-weight: 700;
    				font-size: 28px;
		     	}
		     	.details{
		     		font-size: 24px;
		     		text-indent: 2em;
		     		line-height: 45px;
		     	}
		     	.actives{
		     		padding:5px 20px;
		     		h3{
		     			color: #FF0000;
		     			padding:0 20px;
		     			font-size: 26px;
		     		}
		     	}
		     }
    		.orderinformation {
    			font-size: 26px;
    			background: #FFFFFF;
    			.orderheader {
    				padding: 20px 20px 10px 20px;
    				color: #000000;
    				font-weight: 700;
    				font-size: 28px;
    			}
    			.rodercontent {
    				line-height: 60px;
    				padding: 20px 20px;
    			}
    		}
    	}
    	.footers {
    		width: 100%;
    		background: #FFFFFF;
    		position: fixed;
    		bottom: 0;
    		height: 100px;
    		border-top: 1px solid gainsboro;
    		.cancleorder {
    			float: right;
    			width: 170px;
    			height: 52px;
    			text-align: center;
    			line-height: 52px;
    			margin-top: 20px;
    			border: 1px solid gainsboro;
    			border-radius: 30px;
    			margin-right: 20px;
    		}
    		.payfor {
    			float: right;
    			width: 170px;
    			height: 52px;
    			text-align: center;
    			line-height: 52px;
    			margin-top: 20px;
    			border: 1px solid #FF0000;
    			color: #FF0000;
    			border-radius: 30px;
    			margin-right: 20px;
    		}
    	}
    }
</style>